<template>
  <div class="basic-config">
    <br />
    <el-form ref="form" :model="form" label-width="120px">
      <el-row :gutter="20">
        <!-- 用户初始密码 -->
        <el-col :span="12">
          <el-form-item label="用户初始密码">
            <el-input v-model="form.password"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-button
            @click="handleSave('USER_PASSWORD', form.password)"
            icon="el-icon-check"
            title="保存"
            type="custom"
          ></el-button>
        </el-col>
        <!-- 评论开关 -->
        <el-col :span="24" v-if="false">
          <el-form-item label="评论开关">
            <el-switch
              v-model="form.reviewType"
              active-value="1"
              inactive-value="0"
              @change="handleSave('REVIEW_SWITCH', form.reviewType)"
            >
            </el-switch>
          </el-form-item>
        </el-col>
        <!-- 思政详情开关 -->
        <el-col :span="24" v-if="false">
          <el-form-item label="思政详情开关">
            <el-switch
              v-model="form.educationDetail"
              active-value="1"
              inactive-value="0"
              @change="handleSave('EDUCATION_DETAIL', form.educationDetail)"
            >
            </el-switch>
          </el-form-item>
        </el-col>
        <!-- 视频滚动条拖动开关 -->
        <el-col :span="24" v-if="false">
          <el-form-item label="视频滚动条拖动开关">
            <el-switch
              v-model="form.videoDragBar"
              active-value="1"
              inactive-value="0"
              @change="handleSave('VIDEO_DRAGBAR', form.videoDragBar)"
            >
            </el-switch>
          </el-form-item>
        </el-col>
        <!-- 验证码开关 -->
        <el-col :span="24">
          <el-form-item label="验证码开关">
            <el-switch
              v-model="form.valiCode"
              active-value="1"
              inactive-value="0"
              @change="handleSave('VAILCODE', form.valiCode)"
            >
            </el-switch>
          </el-form-item>
        </el-col>
        <!-- 网站置灰 -->
        <el-col :span="24">
          <el-form-item label="网站置灰">
            <el-switch
              v-model="form.graySite"
              active-value="1"
              inactive-value="0"
              @change="handleSave('GRAY_SITE', form.graySite)"
            >
            </el-switch>
          </el-form-item>
        </el-col>
        <!-- 相关推荐数量 -->
        <el-col :span="12" v-if="false">
          <el-form-item label="相关推荐数量">
            <el-input-number
              v-model="form.recommendCount"
              :min="1"
              :max="15"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="false">
          <el-button
            @click="handleSave('RECOMMEND_COUNT', form.recommendCount)"
            icon="el-icon-check"
            title="保存"
            type="custom"
          ></el-button>
        </el-col>
        <!-- 前台主题色 -->
        <el-col :span="24" v-if="false">
          <el-form-item label="前台主题色">
            <el-radio-group v-model="form.themeHome" @change="handleChangeHome">
              <el-radio
                v-for="item in themeList"
                :key="item.id"
                :label="item.content"
              >
                <div
                  class="color-box"
                  :style="{ background: item.color }"
                ></div>
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <!-- 后台主题色 -->
        <el-col :span="24" v-if="false">
          <el-form-item label="后台主题色">
            <el-radio-group
              v-model="form.themeAdmin"
              @change="handleChangeAdmin"
            >
              <el-radio
                v-for="item in themeList"
                :key="item.id"
                :label="item.content"
              >
                <div
                  class="color-box"
                  :style="{ background: item.color }"
                ></div>
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        password: '',
        reviewType: '',
        recommendCount: '5',
        educationDetail: '0',
        videoDragBar: '0',
        valiCode: '0',
        graySite: '0',
        themeHome: '',
        themeAdmin: '',
      },
      themeList: [],
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      let localKey = 'themeAdmin' + this.$store.getters.userId
      this.form.themeAdmin = this.getLocal(localKey) || '#930b0b,#d41616'
      //获取用户初始密码
      this.form.password = await this.$store.dispatch(
        'getDictByCode',
        'USER_PASSWORD',
      )
      //获取评论开关状态
      this.form.reviewType = await this.$store.dispatch(
        'getDictByCode',
        'REVIEW_SWITCH',
      )
      //思政详情开关
      this.form.educationDetail = await this.$store.dispatch(
        'getDictByCode',
        'EDUCATION_DETAIL',
      )
      //视频滚动条拖动开关
      this.form.videoDragBar = await this.$store.dispatch(
        'getDictByCode',
        'VIDEO_DRAGBAR',
      )
      //验证码开关
      this.form.valiCode = await this.$store.dispatch(
        'getDictByCode',
        'VAILCODE',
      )
      //网站置灰
      this.form.graySite = await this.$store.dispatch(
        'getDictByCode',
        'GRAY_SITE',
      )
      //推荐数量
      this.form.recommendCount = await this.$store.dispatch(
        'getDictByCode',
        'RECOMMEND_COUNT',
      )
      //前台主题色
      this.form.themeHome = await this.$store.dispatch(
        'getDictByCode',
        'THEME_ACTIVE_HOME',
      )
      //主题色列表
      this.themeList = await this.$store.dispatch(
        'queryOpenApiTbDictDetailByCode',
        'THEME_HOME',
      )

      this.themeList.forEach((item) => {
        let color = item.content.split(',')[0]
        this.$set(item, 'color', color)
      })
      // console.log(this.form.themeHome)
    },
    //保存信息
    async handleSave(code, name) {
      try {
        await this.$store.dispatch('saveDicByCode', { code, name })
        this.$message({
          message: '操作成功',
          type: 'success',
        })
      } catch (error) {
        // console.log(error)
      }
    },
    // 修改前台主题色
    async handleChangeHome(color) {
      await this.handleSave('THEME_ACTIVE_HOME', color)
      let arr = color.split(',')
      document.documentElement.style.setProperty('--colorH1', arr[0])
      document.documentElement.style.setProperty('--colorH2', arr[1])
    },
    // 修改后台主题色
    async handleChangeAdmin(color) {
      let arr = color.split(',')
      document.documentElement.style.setProperty('--colorA1', arr[0])
      document.documentElement.style.setProperty('--colorA2', arr[1])
      let localKey = 'themeAdmin' + this.$store.getters.userId
      this.setLocal(localKey, color)
    },
  },
}
</script>
<style scoped lang="scss">
.basic-config {
  width: 90%;
  min-width: 1000px;
  .color-box {
    width: 50px;
    height: 25px;
    background: #fff;
    float: right;
    margin-top: -6px;
    border-radius: 5px;
  }
}
</style>